<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        .wrap {
            width: 100%;
            display: flex;
            margin: 0.2rem 0 0 0;
            position: relative;
        }
        /*左侧的导航样式*/
        
        .nav_left {
            width: 21.1875rem;
            overflow: scroll;
        }
        
        .nav_left::-webkit-scrollbar {
            display: none;
        }
        
        .nav_content {
            white-space: nowrap;
            padding: 0 0.7rem;
        }
        
        .nav_content span {
            display: inline-block;
            padding: 0.4rem 0.6rem;
            font-size: 0.875rem;
        }
        
        .nav_content .active {
            border-bottom: 2px solid #7f4395;
            color: #7f4395;
        }
        
        .nav_left,
        .down {
            float: left;
        }
        /*右侧导航部分*/
        
        .down {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .gray {
            color: gray;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model.trim()="name" />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model.number="age" />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="gender" :value="gender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
        </div>
        <div>
            <button @click="add(i)">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.gender}}</td>
                    <td>
                        <button @click="arr.splice(index, 1)">删除</button>
                        <button @click="edit(index)">编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: "",
                age: 0,
                gender: "",
                i: null,
                arr: [{
                    name: " tom",
                    age: 18,
                    gender: "男"
                }, {
                    name: "jerry",
                    age: 20,
                    gender: "男"
                }]
            },
            methods: {
                edit(i) {
                    this.arr[i] = obj
                    this.name = obj.name
                    this.age = obj.age
                    this.gender = obj.gender
                    this.i = i
                },
                add() {
                    const newObj = {
                        name: this.username,
                        age: this.userAge,
                        gender: this.gender,
                    }
                    if (this.i !== null) {
                        newObj = this.arr[this.i]
                    } else {
                        this.name !== "" && this.gender !== "" && this.age > 1 ? this.arr.push(newObj) : alert("请输入有效内容")
                    }
                    this.name = ""
                    this.age = ""
                    this.gender = ""
                }
            }
        })

        //- 需求1: 渲染页面, 准备初始的数据(自己手写数据结构) - 前面是数组索引+1 *作为序号
        // - 需求2: 当输入框没有值, 要给用户一个提示, 必须都有值才能增加新数据 (数据驱动页面哦)
        // - 需求3: 添加功能 - 想好数据结构统一对象的key
        // - 需求4: 点击编辑功能, 把值赋予到输入框上(不要操作dom, 数据驱动页面)
        // - 需求5: 用户修改后, 点击相同按钮 - 想想怎么判断怎么是添加还是修改的功能 (提示: 准备一个全局变量, 点过编辑按钮可以让它为true) - 实现编辑后更新页面效果
        // - 需求6: 点击删除, 删除这行数据
    </script>
</body>

</html>